<template>
    <div
        :class="[CTheme.theme, column !== null ? 'column' : '']"
        style="width: 100vw; height: 100vh; overflow: auto; position: relative"
        :style="{ background: background }"
    >
        <div id="themeTop" :style="{ height: top + 'px' }"></div>
        <slot />
        <div :style="{ height: bottom + 'px' }"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { getCurrentInstance } from 'vue'
import CSystem from '~/store/CSystem'
import CTheme from '~/store/CTheme'
import CEvent from '~/utils/CEvent'
import Timer from '~/utils/Timer'
defineProps({
    /**
     * 开启列，一般用于和col控制
     */
    column: { default: null as any },
    /**
     * 背景色
     */
    background: { default: 'var(--s-theme-bg)' },
    /**
     * 顶部留空距离,默认是customBarHeight
     */
    top: { default: CSystem.customBarHeight },
    /**
     * 底部留空距离
     */
    bottom: { default: 0 }
})

const conf = reactive({
    topTimer: null as any,
    value: CSystem.customBarHeight
})

CEvent.on('topStatus', (obj: { status: boolean; value?: number }) => {
    if (obj.value) conf.value = obj.value
    Timer.un(conf.topTimer)
    if (obj.status) {
        conf.topTimer = Timer.on(() => {
            topStatus()
        }, 50)
    }
})

const _node = getCurrentInstance()
const topStatus = async () => {
    uni.createSelectorQuery()
        .in(_node)
        .select('#themeTop')
        .boundingClientRect(function (res: any) {
            const boxTop = (conf.value + res.top) / conf.value
            if (boxTop >= 0) {
                CEvent.emit('boxTop', boxTop)
            } else {
                CEvent.emit('boxTop', 0)
            }
        })
        .exec()
}
</script>
